<template>
	<view class="root f1 jc-center ai-center">
		<image
			:style="{ width: `350rpx`, height: `505rpx` }"
			class="bgc-eee br-12"
			:src="photoSrc"
			mode="aspectFill"
		/>

		<view class="width-70percent mt-100">
			<image
				class="width-100percent height-90 mt-12"
				src="/static/btn-photograph.png"
				mode="aspectFit"
				@click="photograph"
			/>
			<image
				class="width-100percent height-90 mt-12"
				src="/static/btn-choosePhoto.png"
				mode="aspectFit"
				@click="choosePhoto"
			/>
			<image
				v-if="photoSrc"
				class="width-100percent height-90 mt-12"
				src="/static/btn-previousPhoto.png"
				mode="aspectFit"
				@click="usePreviousPhoto"
			/>
		</view>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import { Storage } from "@/libs/utils";

	@Component
	export default class Photo extends Vue {
		// component property
		photoSrc: string = "";

		onShow() {
			this.$request.get("&r=util.uploader.getlastimg").then((res) => {
				this.photoSrc = res.data;
			});
		}

		photograph() {
			uni.navigateTo({ url: "/pages/Camera" });
		}
		usePreviousPhoto() {
			uni.navigateTo({ url: "/pages/TryOn" });
		}
		choosePhoto() {
			uni.chooseImage({
				count: 1,
				sourceType: ["album"],
				success: ({ tempFilePaths }) => {
					uni.showToast({ title: "Uploading...", icon: "loading" });
					uni.uploadFile({
						url: this.$config.API_URL + "&r=util.uploader.get_face_xy",
						filePath: tempFilePaths[0],
						name: "file",
						header: {
							Authorization: Storage.get("authorization"),
						},
						success: (res) => {
							const { error, message } = JSON.parse(res.data);

							uni.showToast({ title: message, icon: "none" });

							if (error) return;

							uni.navigateTo({ url: "/pages/TryOn" });
						},
						fail: uni.hideToast,
					});
				},
			});
		}
	}
</script>

<style lang="scss" scoped>
	// scss
</style>